<template>
	<view class="my-page">
		<image class="edit-bg" :src="info.user.u_img" mode=""></image>
		<view class="box-max">
			<view class="set" @click="gonavto('/pages/my/set/index')">
				设置
			</view>
			<view class="head">
				<view class="head-left" @click="gonavto('/pages/my/set/about')">
					<image class="avatar" :src="info.user.u_img" mode=""></image>
				</view>
				<view class="head-info">
					<view class="head-name">
						{{info.user.username}}
					</view>
					<view class="head-tell">
						ID：{{info.user.id || '0'}}
					</view>
					<view class="vip">
						<image :src="info.user.level" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="record">
					<view class="record-item" v-for="(item,index) in recordList" :key="index"
						@click="gonavto(item.url)">
						<image :src="item.img" mode="heightFix"></image>
						<view class="record-text">
							{{item.text}}
						</view>
						<view class="tisp" v-if="index == 0 && info.button.qg > 0">
							{{info.button.qg}}
						</view>
						<view class="tisp" v-if="index == 1&& info.button.zr > 0">
							{{info.button.zr}}
						</view>
						<view class="tisp" v-if="index == 2&& info.button.yy > 0">
							{{info.button.yy}}
						</view>
					</view>
				</view>
			</view>
			<view class="price">
				<view class="price-item" @click="gonavto('/pages/my/property/index')">
					<view class="price-num">
						{{Number(info.user.all_assets).toFixed(0)}}
					</view>
					<view class="price-text">
						总货款
					</view>
				</view>
				<view class="price-item" @click="gonavto('/pages/my/income/index')">
					<view class="price-num">
						{{Number(info.user.all_reward).toFixed(0)}}
					</view>
					<view class="price-text">
						总收益
					</view>
				</view>
				<view class="price-item" @click="gonavto('/pages/my/coin/index')">
					<view class="price-num">
						{{Number(info.user.balance).toFixed(0)}}
					</view>
					<view class="price-text">
						积分
					</view>
				</view>
				<view class="price-item" @click="gonavto('/pages/my/gmc/index')">
					<view class="price-num">
						{{Number(info.user.give_balance).toFixed(0)}}
					</view>
					<view class="price-text">
						商品币
					</view>
				</view>
				<!-- <view class="price-item" @click="gonavto('/pages/my/djq/index')">
					<view class="price-num">
						{{ Number(info.user.djj_balance).toFixed(0)}}
					</view>
					<view class="price-text">
						代金券
					</view>
				</view> -->
			</view>

			<view class="invite-img" @click="gonavto('/pages/my/invite/index')">
				<image src="/static/home/invite-img.png" mode="widthFix"></image>
			</view>
			<!-- <view class="box">
				<view class="title">我的订单</view>
				<view class="record">
					<view class="record-item" v-for="(item,index) in useList" :key="index"
						@click="golist(index)">
						<image :src="item.img" mode="aspectFill"></image>
						<view class="record-text">
							{{item.text}}
						</view>
					</view>
				</view>
			</view> -->
			<view class="box2">
				<view class="ability-title">其他功能</view>
				<view class="box-item">
					<view class="ability-item" v-for="(item,index) in abilityList" :key="index" @click="gonavto(item.url)">
						<view class="ability-left">
							<image :src="item.img" mode=""></image>
							<view>
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				recordList: [{
						img: '/static/home/record1.png',
						text: '抢购记录',
						url: '/pages/my/buy_record/index'
					},
					{
						img: '/static/home/record2.png',
						text: '转让记录',
						url: '/pages/my/transfer_record/index'
					},
					{
						img: '/static/home/record3.png',
						text: '预约记录',
						url: '/pages/my/yuyue/index'
					}
				],
				useList: [{
						img: '../../static/home/icon1.png',
						text: '全部订单'

					},
					{
						img: '../../static/home/icon2.png',
						text: '待发货'
					},
					{
						img: '../../static/home/icon3.png',
						text: '待收货'
					},
					{
						img: '../../static/home/icon4.png',
						text: '已收货'
					},
					{
						img: '../../static/home/icon5.png',
						text: '收货地址'
					}
				],
				abilityList: [{
						text: '收款方式',
						img: '/static/home/ability1.png',
						url: '/pages/my/receive/index'
					},
					{
						text: '实名认证',
						img: '/static/home/ability2.png',
						url: '/pages/my/real/index'
					},
					{
						text: '我的团队',
						img: '/static/home/ability3.png',
						url: '/pages/my/team/index'
					},
					{
						text: '人工客服',
						img: '/static/home/ability4.png',
						url: '/pages/my/kefu/index'
					},
					// {
					// 	text: '我的工单',
					// 	img: '/static/home/ability5.png',
					// 	url: '/pages/my/work/index'
					// },
					// {
					// 	text: 'AI交易所',
					// 	img: '/static/home/ability6.png',
					// 	url: ''
					// },
					// {
					// 	text: '立拍直播',
					// 	img: '/static/home/ability8.png',
					// 	url: ''
					// }
				]
			}
		},
		onShow() {
			this.postuserinfo()
		},
		methods: {
			golist(e) {
				if (e == 4) {
					uni.navigateTo({
						url: '/pages/shop/address/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/shop/orderlist/index?cutt=' + e
					})
				}

			},
			postuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/personal/myIndex',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					}
				})

			},
			gonavto(url) {
				if (url == '') {
					uni.showToast({
						title: '待开放',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style>
	page {
		background: #000000;
	}
</style>
<style lang="scss" scoped>
	.my-page {
		position: relative;
		height: 100vh;
		position: relative;
		background-image: url('../../static/login/login-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 593px;

		.edit-bg {
			width: 100%;
			height: 600rpx;
			filter: blur(20px);
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.box-max {
			padding: 30rpx;

			.set {
				display: flex;
				justify-content: right;
				padding: 10rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);
				color: #fff;
				font-size: 26rpx;
				border-radius: 30rpx;
			}

			.head {
				margin-top: 60rpx;
				.head-left {
					display: flex;
					align-items: center;
					justify-content: center;

					.avatar {
						width: 160rpx;
						height: 160rpx;
						border-radius: 20%;
						border: 4rpx solid #fff;
					}


				}

				.head-info {
					text-align: center;
					margin-top: 30rpx;

					.vip {
						margin-top: 10rpx;

						image {
							width: 80px;
							height: 23px;
						}
					}

					.head-name {
						color: #ffffff;
						font-size: 32rpx;
						font-weight: bold;
					}

					.head-tell {
						color: #ffffff;
						font-size: 26rpx;
						margin-top: 10rpx;
					}
				}

			}

			.price {
				margin-top: 30rpx;
				padding: 25rpx;
				border-radius: 30rpx;
				display: flex;
				border: 1rpx solid #40404080;
				justify-content: space-between;

				.price-item {
					text-align: center;

					.price-num {
						color: #ffffff;
						font-size: 38rpx;
						font-weight: bold;
					}

					.price-text {
						color: #999999;
						font-size: 28rpx;
						margin-top: 5rpx;
					}
				}
			}

			.invite-img {
				width: 100%;
				margin-top: 30rpx;
				padding-left: 10rpx;

				image {
					width: 100%;
					height: 106px;
				}
			}

			.box {
				.record {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: 20rpx;

					.record-item {
						width: 30%;
						text-align: center;
						position: relative;

						.tisp {
							width: 35rpx;
							height: 35rpx;
							position: absolute;
							right: 50rpx;
							top: -10rpx;
							font-size: 24rpx;
							line-height: 35rpx;
							color: #fff;
							background-color: #FD586C;
							border-radius: 50rpx;
						}

						image {
							width: 100rpx;
							height: 100rpx;
						}

						.record-text {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #fff;
						}
					}
				}
			}
			.box2{
				margin-top: 30rpx;
				border: 1rpx solid #40404080;
				padding: 25rpx;
				border-radius: 30rpx;
				.ability-title{
					color: #fff;
					margin-bottom: 20rpx;
				}
				.box-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.ability-item {
						text-align: center;
						.ability-left {
							color: #ffffff;
							font-size: 26rpx;
					
							image {
								width: 32px;
								height: 32px;
							}
						}
					}
				}	
			}
		}
	}
</style>